<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../dist/style/sa-grid.css">
    <link rel="stylesheet" href="../dist/style/sa-reset.css">
    <link rel="stylesheet" href="../dist/style/sa.css">
    <style>
        .row > div{
            background-clip: content-box;
            background-color: #0a0a0a;
            color:white;
        }

        .test-table{
            box-sizing: content-box!important;
            width:100%;
        }

        .test-table th,
        .test-table td
        {
            border:1px solid black;
        }

        .test-table thead th,
        .test-table thead tr{
            border-bottom:1px solid black;
        }
    </style>
</head>
<body>
<ul class="breadcrumb">
    <li class="breadcrumb-item"><a   href="#">1</a></li>
    <li class="breadcrumb-item"><a  href="#">3</a></li>
    <li class="breadcrumb-item"><a  href="#">2</a></li>
</ul>
<div class=" container-fluid">
    <div class="row">
        <div class="col-sm-3 col-md-8">.col-sm-3</div>
        <div class="col-sm-3">.col-sm-3</div>
        <div class="col-sm-3">.col-sm-3</div>
        <div class="col-sm-3">.col-sm-3</div>
        <div class="col-sm-3">.col-sm-3</div>
    </div>

    <div class="btn-group">
        <button type="button" class="btn btn-primary active">Apple</button>
        <button type="button" class="btn btn-primary">Samsung</button>
        <div class="btn-group">
            <button type="button" class="btn btn-primary btn-lg dropdown-toggle" data-toggle="dropdown">
                Sony
            </button>
        </div>
    </div>

    <div class="btn-group">
        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
            Sony
        </button>
        <button class="btn btn-danger ">红色按钮asdasd <span class="badge badge-danger">22</span></button>
        <button class="btn btn-success no-gradient ">红色按钮</button>
        <button class="btn btn-danger">红色按钮</button>
        <button class="btn btn-outline-danger ">红色按钮</button>
        <button class="btn btn-secondary ">红色按钮</button>
    </div>

    <div class="btn-group-vertical">
        <button class="btn btn-danger disabled">红色按钮asdasd <span class="badge badge-danger">22</span></button>
        <button class="btn btn-success no-gradient disabled">红色按钮</button>
        <button class="btn btn-danger">红色按钮</button>
        <button class="btn btn-outline-danger disabled">红色按钮</button>
        <button class="btn btn-secondary ">红色按钮</button>
    </div>

    <div class="btn-group">
        <button class="btn btn-lg btn-danger ">红色按钮asdasdasd <span class="badge badge-danger">22</span></button>
        <button class="btn btn-danger ">红色按钮 <span class="badge badge-danger">22</span></button>
        <button class="btn btn-danger ">红色按钮 <span class="badge badge-danger">22</span></button>
        <button class="btn btn-danger ">红色按钮 <span class="badge badge-danger">22</span></button>
        <button class="btn btn-danger ">红色按钮 <span class="badge badge-danger">22</span></button>
    </div>

    <div class="btn-group">
        <button type="button" class="btn btn-primary">Apple</button>
        <button type="button" class="btn btn-primary">Samsung</button>
        <div class="btn-group">
            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                Sony
            </button>
            <div class="dropdown-menu show" >
                <div class="dropdown-header">header</div>
                <a class="dropdown-item" href="#">Tablet</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">Smartphone</a>
            </div>
        </div>
    </div>
    <br><br><br><br><br><br><br><br><br>
    <ul class="list-group  list-group-flush">
        <li class="list-group-item list-group-item-primary">First item</li>
        <li class="list-group-item">Second item</li>
        <li class="list-group-item">Third item</li>
    </ul>
    <br>
    <form class="form-group">
        <div class="form-row">
            <div class="col-3"><label for="email" class="col-form-label-lg">Email:</label></div>
            <div class="col-8"><input type="email" class="form-control form-control-lg form-check-input is-invalid" id="email" placeholder="Enter email"></div>
            <div class="invalid-feedback ">test</div>
            <div class="invalid-tooltip ">test</div>
        </div>
    </form>

    <div class="col-md-5 mb-3">
        <label for="country">Country</label>
        <select class="custom-select d-block w-100" id="country" required="">
            <option value="">Choose...</option>
            <option>United States</option>
        </select>
        <div class="invalid-feedback">
            Please select a valid country.
        </div>
    </div>

    <form action="">
        <div class="form-row is-invalid">
            <div class="col-1"><label for="input" class="col-form-label">test:</label></div>
            <div class="col-8"><input type="text" class="form-control">
                <div class="invalid-feedback">just test</div>
            </div>
        </div>

        <div class="form-row ">
            <div class="col-1"><label for="input" class="col-form-label">test:</label></div>
            <div class="col-8"><input type="text" class="form-control">
                <div class="invalid-feedback">just test</div>
            </div>
        </div>
    </form>
    <h1>code</h1>
    <code>test code</code>
    <br>
    <kbd>kbd</kbd>
    <br>
    <br>
    <pre class="pre-scrollable">pre <kbd>kbd</kbd>pre <kbd>kbd</kbd>pre <kbd>kbd</kbd>pre <kbd>kbd</kbd>pre <kbd>kbd</kbd>pre <kbd>kbd</kbd></pre>
    <br>
    <br>
    <form action="">
        <div class="custom-control custom-radio">
            <input  type="radio" name="" id="ccc" class="custom-control-input">
            <label for="ccc" class="custom-control-label">test</label>
        </div>

        <div class="custom-control custom-control-sm custom-checkbox">
            <input  type="checkbox" name="" id="c" class="custom-control-input">
            <label for="c" class="custom-control-label">test</label>
        </div>
        <div class="custom-control custom-control-lg custom-radio">
            <input  type="radio" name="" id="cc" class="custom-control-input">
            <label for="cc" class="custom-control-label">test</label>
        </div>

        <select name="" class="custom-select" id=""></select>
        <select name="" class="custom-select custom-select-sm" id=""></select>
        <select name="" class="custom-select custom-select-lg" id=""></select>
    </form>
    <p></p>
    <input type="range" class="custom-range" value="1" max="100" min="1" step="1">
    <p></p>

    <p></p>
    <input type="range" class="custom-range custom-range-sm" value="1" max="100" min="1" step="1">
    <p></p>

    <p></p>
    <input type="range" class="custom-range custom-range-lg" value="1" max="100" min="1" step="1">
    <p></p>

    <div class="input-group">
        <input type="text" class="form-control">
        <input type="text" class="form-control">
        <input type="text" class="form-control">
        <button>test</button>
    </div>

    <div class="input-group">
        <div class="input-group-prepend">
            <span class="input-group-text ">input-group-text</span>
        <span class="input-group-text ">input-group-text</span>
        </div>
        <!--<span class="input-group-text">input-group-text</span>-->
        <input type="text" class="form-control">
        <span class="input-group-text input-group-append">input-group-text</span>
    </div>
    <br><br>
    <ul class="nav nav-pills">
        <li class="nav-item active"><a href="" class="nav-link">1</a></li>
        <li class="nav-item show"><a href="" class="nav-link">1</a></li>
        <li class="nav-item"><a href="" class="nav-link">1</a></li>
        <li class="nav-item"><a href="" class="nav-link">1</a></li>
        <li class="nav-item">2</li>
        <li class="nav-item">3</li>
        <li class="nav-item">3</li>
    </ul>
    <br><br>
    <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
        <a href="#" class="navbar-brand">logo</a>
        <button class="navbar-toggler">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="navbar-collapse">
            <ul class="navbar-nav ">
                <li class="nav-item"><a href="#"  class="nav-link active">logo</a></li>
                <li class="nav-item"><a href="#"  class="nav-link">logo</a></li>
            </ul>
        </div>

    </nav>
    <br>
    <br>
    <ul class="pagination">
        <li class="page-item"><a class="page-link" href="#">Previous</a></li>
        <li class="page-item"><a class="page-link" href="#">1</a></li>
        <li class="page-item active"><a class="page-link" href="#">2</a></li>
        <li class="page-item"><a class="page-link" href="#">3</a></li>
        <li class="page-item"><a class="page-link" href="#">Next</a></li>
    </ul>

    <br>
    <br>

    <div class="progress">
        <div class="progress-bar bg-success" style="width:40%">
            Free Space
        </div>
        <div class="progress-bar bg-warning" style="width:10%">
            Warning
        </div>
        <div class="progress-bar bg-danger" style="width:20%">
            Danger
        </div>
    </div>
    <div class="progress">
        <div class="progress-bar progress-bar-striped progress-bar-animated" style="width:40%"></div>
    </div>
    <br>
    <div class="progress progress-sm">
        <div class="progress-bar progress-bar-striped progress-bar-animated" style="width:40%"></div>
    </div>
    <br>
    <div class="progress progress-lg">
        <div class="progress-bar progress-bar-striped progress-bar-animated" style="width:40%"></div>
    </div>
    <br>
    <br>
    <div class="jumbotron jumbotron-fluid">
        <div class="container">
            <h1>菜鸟教程</h1>
            <p>学的不仅是技术，更是梦想！！！</p>
        </div>
    </div>
    <br>
    <br>

    <table class="table table-hover table-danger table-striped table-hover ">
        <thead>
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Email</th>
        </tr>
        </thead>
        <tbody>
        <tr class="active">
            <td>John</td>
            <td>Doe</td>
            <td>john@example.com</td>
        </tr>
        <tr>
            <td>Mary</td>
            <td>Moe</td>
            <td>mary@example.com</td>
        </tr>
        <tr>
            <td>July</td>
            <td>Dooley</td>
            <td>july@example.com</td>
        </tr>
        </tbody>
    </table>

    <table class="table table-hover table-success  table-hover ">
        <thead>
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Email</th>
        </tr>
        </thead>
        <tbody>
        <tr class="active">
            <td>John</td>
            <td>Doe</td>
            <td>john@example.com</td>
        </tr>
        <tr>
            <td>Mary</td>
            <td>Moe</td>
            <td>mary@example.com</td>
        </tr>
        <tr>
            <td>July</td>
            <td>Dooley</td>
            <td>july@example.com</td>
        </tr>
        </tbody>
    </table>

    <table class="table table-borderless table-sm table-danger table-hover ">
        <thead>
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Email</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>John</td>
            <td>Doe</td>
            <td>john@example.com</td>
        </tr>
        <tr>
            <td>Mary</td>
            <td>Moe</td>
            <td>mary@example.com</td>
        </tr>
        <tr>
            <td>July</td>
            <td>Dooley</td>
            <td>july@example.com</td>
        </tr>
        </tbody>
    </table>

    <table class="table table-bordered table-lg table-striped  table-hover">
        <thead>
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Email</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>John</td>
            <td>Doe</td>
            <td>john@example.com</td>
        </tr>
        <tr>
            <td>Mary</td>
            <td>Moe</td>
            <td>mary@example.com</td>
        </tr>
        <tr>
            <td>July</td>
            <td>Dooley</td>
            <td>july@example.com</td>
        </tr>
        </tbody>
        <tbody>
        <tr>
            <td>John</td>
            <td>Doe</td>
            <td>john@example.com</td>
        </tr>
        <tr>
            <td>Mary</td>
            <td>Moe</td>
            <td>mary@example.com</td>
        </tr>
        <tr>
            <td>July</td>
            <td>Dooley</td>
            <td>july@example.com</td>
        </tr>
        </tbody>
    </table>
    <br>
    <table class="table table-dark table-bordered table-lg table-striped table-hover">
        <thead>
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Email</th>
        </tr>
        </thead>
        <tbody>
        <tr class="active">
            <td>John</td>
            <td>Doe</td>
            <td>john@example.com</td>
        </tr>
        <tr>
            <td>Mary</td>
            <td>Moe</td>
            <td>mary@example.com</td>
        </tr>
        <tr>
            <td>July</td>
            <td>Dooley</td>
            <td>july@example.com</td>
        </tr>
        </tbody>
        <tbody>
        <tr>
            <td>John</td>
            <td>Doe</td>
            <td>john@example.com</td>
        </tr>
        <tr>
            <td>Mary</td>
            <td>Moe</td>
            <td>mary@example.com</td>
        </tr>
        <tr>
            <td>July</td>
            <td>Dooley</td>
            <td>july@example.com</td>
        </tr>
        </tbody>
    </table>
    <br>
    <br>
    <div id="a1" class="alert show fade alert-warning alert-dismissible">
        <button class=" close" data-dismiss="alert">X</button>
     <div class="alert-link ">link</div>
    </div>
    <br>
    <br>
    <div class="toggle-group">
    <button id="btn1" type="button" class="btn  btn-primary " data-toggle="button" data-target="#btn2 | #btn3">Apple</button>
    <button id="btn2" type="button" class="btn  btn-primary "  data-toggle="button" data-target="">sony</button>

    </div>
     <button id="btn3" type="button" class="btn  btn-primary "  data-toggle="button" data-target="">sony</button>
    <br>
    <br>
    <div id="demo" class="carousel slide" data-ride="carousel">

        <!-- 指示符 -->
        <ul class="carousel-indicators">
            <li data-target="#demo" data-slide-to="0" class="active"></li>
            <li data-target="#demo" data-slide-to="1"></li>
            <li data-target="#demo" data-slide-to="2"></li>
        </ul>

        <!-- 轮播图片 -->
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="http://static.runoob.com/images/mix/img_fjords_wide.jpg">
            </div>
            <div class="carousel-item">
                <img src="http://static.runoob.com/images/mix/img_nature_wide.jpg">
            </div>
            <div class="carousel-item">
                <img src="http://static.runoob.com/images/mix/img_mountains_wide.jpg">
            </div>
        </div>

        <!-- 左右切换按钮 -->
        <a class="carousel-control-prev" href="#demo" data-slide="prev">
            <span class="carousel-control-prev-icon"></span>
        </a>
        <a class="carousel-control-next" href="#demo" data-slide="next">
            <span class="carousel-control-next-icon"></span>
        </a>

    </div>


    <!-- 左右切换按钮 -->
    <a class="carousel-control-prev" href="#demo" data-slide="prev">
        <span class="carousel-control-prev-icon"></span>
    </a>
    <a class="carousel-control-next" href="#demo" data-slide="next">
        <span class="carousel-control-next-icon"></span>
    </a>

</div>
    <br>
    <br>
    <br>
    <br>
</div>
<!--<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>-->
<!--<script data-main="main.js" src="js/require.js"></script>-->
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="js/sa.js"></script>
<script>
    $('#btn1').on('toggle.sa.button',function(){
        console.log('btn');
    })

    $('#btn1').on('active.sa.button',function(){
        console.log('act');
    })

    $('#btn1').on('inactive.sa.button',function(){
        console.log('inac');
    })
</script>
</body>
</html>